<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
		div {
			width: 100px;
			height: 100px;
			background: red;
			transition: width 3s, height 2s;
		}
		div:hover {
			width: 200px;
			height: 200px;
		}
		#transition {
			margin: 0 auto;
			width: 100px;
			height: 100px;
			background: red;
			transition: width 2s ease-in, height 2s ease-in,transform 2s ease-in;
		}
		#transition:hover {
			width: 200px;
			height: 200px;
			transform: rotate(180deg);
		}
	</style>
</head>
<body>
	<!-- 
	transition					
	Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

	Safari 需要前缀 -webkit-。

	注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。

	注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。

	要实现这一点，必须规定两项内容：

	规定您希望把效果添加到哪个 CSS 属性上
	规定效果的时长
	转换属性：
	属性	描述	CSS
	transition	简写属性，用于在一个属性中设置四个过渡属性。	3
	transition-property	规定应用过渡的 CSS 属性的名称。	3
	transition-duration	定义过渡效果花费的时间。默认是 0。	3
	transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
	transition-delay	规定过渡效果何时开始。默认是 0。
	 -->
	 <!-- <div>
	 	css3过渡
	 </div> -->
	 <div id="transition">
	 	向宽度、高度和转换添加过渡效果：
	 </div>
</body>
</html>